<template>
  <div class="card">
    <div class="title">{{ title }}</div>
    <div v-if="portfolioList.length">
      <div class="list-wrapper">
        <div v-for="(portfolio, index) in portfolioList" :key="index" class="list-item">
          <div @click.stop="toDetail(portfolio)">
            <!-- 标题 -->
            <div class="list-wrapper_title">
              <div class="title_left">
                <img :src="require('@/assets/images/portfolio/' + portfolio.imgName + '.png')" alt="portfolio-icon" />
                <div>
                  <div class="name">{{ portfolio.name }}</div>
                  <div class="tag-list" v-if="portfolio.label && portfolio.label.length">
                    <div class="tag" v-for="(tag, index) in portfolio.label" :key="index">{{ tag }}</div>
                  </div>
                </div>
              </div>
              <Subscribe :projectId="portfolio.project_id" :refreshSub="refreshSub"></Subscribe>
            </div>
            <!-- 简介、偏好 -->
            <div class="list-wrapper_content">
              <div>简介：{{ portfolio.profile }}</div>
              <div>偏好：{{ portfolio.input }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <NoData />
    </div>
  </div>
</template>

<script>
import { reqPortfolioInfo } from '@/apis/portfolio.api';
import { PORTFOLIO_LIST, BASE_URL } from '@/config/portfolio';
import NoData from '@/components/common/NoData.vue';
import Subscribe from '@/components/Subscribe.vue';

export default {
  components: {
    NoData,
    Subscribe
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      portfolioList: [],
      refreshSub: 0,
    };
  },
  created() {
    const product = window.getParam('product');
    const portfolioList = Object.values(PORTFOLIO_LIST[product]);
    this.getSubId(portfolioList);
  },
  mounted() {
    this.$addEventListener('onShow', () => {
      this.refreshSub++;
    });
  },
  methods: {
    async getSubId(portfolioList) {
      const { id } = portfolioList[0];
      try {
        const res = await reqPortfolioInfo({ portfolio_id: id });
        if (res.status_code === 0 && res.data) {
          portfolioList[0].project_id = res.data.project_id;
        }
        this.portfolioList = portfolioList;
      } catch(err) {
        this.portfolioList = portfolioList;
      }
    },
    /**
     * 跳转股池详情页
     */
    toDetail(portfolio) {
      window.hxmClickStat(`${portfolio.statId}`);
      // 都跳转跟踪池
      location.href = `${BASE_URL}portfolio?portfolio_id=${portfolio.id}&product=${window.getParam('product')}&project_id=${portfolio.project_id}`;
    }
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  padding: 12px;
}

.list-item {
  margin: 8px 6px;
  padding: 16px 10px;
  border-radius: 6px;
  background: var(--bg-color-2);
}

.tag-list {
  display: flex;
  margin-top: 6px;
  .tag {
    border: 0.33px solid var(--text-2);
    border-radius: 2px;
    font-size: 10px;
    color: var(--text-2);
    height: 14px;
    line-height: 14px;
    padding: 0 2px;
    margin-left: 8px;
  }
}

.list-wrapper_remind {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding: 9px 8px;
  border-radius: 4px;
  background: var(--bg-color-1);
  font-size: 12px;
  color: var(--text-1);
  line-height: 16px;
  .point {
    padding: 0 2px;
    border-radius: 2px;
    line-height: 16px;
  }
  .text {
    margin-left: 6px;
    margin-right: 8px;
    width: 278px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
}

.list-wrapper {
  position: relative;
  width: 7.42rem;
  font-size: 0.28rem;
  padding: 1px 0;
  .list-wrapper_title {
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;
  }
  .title_left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .name {
      white-space: nowrap;
      margin-left: 0.2rem;
      color: var(--text-1);
    }
    img {
      width: 0.8rem;
      height: 0.8rem;
    }
  }
  .list-wrapper_title span img {
    pointer-events: none;
    width: 0.32rem;
    height: 0.25rem;
  }
  .list-wrapper_content {
    font-size: 14px;
    line-height: 18px;
    color: var(--text-2);
    div:nth-child(2) {
      margin-top: 8px;
    }
  }
}
</style>
